<template>
  <view class="container">
	  
	  <view class="addItem">
		  <view @tap="$toPage('/pages/form/student')" class="button">添加学生</view>
	  </view>
	  
	  <view class="students">
		<view class="student" v-for="(student, index) in students" :key="index">
		  <view class="info">
			<image class="avatar" :src="student.avatar"></image>  
		    <text class="name">{{ student.name }}</text>
		    <text class="gender">{{ student.gender }}</text>
		    <text class="age">{{ student.age }}岁</text>
		    <text class="phone">{{ student.phone }}</text>
		  </view>
		</view>
	  </view>
    
  </view>
</template>

<script>

export default {
  data() {
    return {
      students: [
        { name: '张三',  gender: '男', age: '20', phone: '1234567890', avatar: 'https://cdn.uviewui.com/uview/swiper/swiper1.png', },
        { name: '李四',  gender: '女', age: '22', phone: '0987654321',avatar: 'https://cdn.uviewui.com/uview/swiper/swiper1.png' },
        // ...更多学生数据
      ]
    };
  }
};
</script>

<style scoped>

.container {
  padding-top: 20px;
}

.student {
  display:flex;
}
.avatar{
 width:50px;
 height:50px;
 border-radius:50%;
 margin-right:10px;
}
.info{
 width:90%;
 border-radius:5px;
 margin-right:10px;
 flex-grow:1;
 border: 1px solid #ccc;
 text-align: center;
 justify-content: center;
  
}
 .info text{
	 display: inline-block;
	 padding: 10px;
}


.name,.gender,.age,.phone{
 margin-bottom:5px;
 font-size:14px;
 color:#333333;
}
.addItem{
	display: flex; 
	justify-content: flex-end;
	margin: 0 10px 20px;
}
.addItem view{
	color: #fff;
	background-color: #3c9cff;
	border-color: #3c9cff;
	border-width: 1px;
	border-style: solid;
	width: 100px;
	text-align: center;
	border-radius: 30px;
}

</style>
